<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: gaoluo
 * @Date: 2021-08-19 15:08:01
 * @LastEditors: gaoluo
 * @LastEditTime: 2021-12-04 15:07:06
 * @FilePath: /nhw/src/App.vue
-->
<template>
  <div id="app">
    <transition :name="transitionName" appear>
      <keep-alive :include="includes">
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
import store from "@/store.js";
import touchBack from "@/utils/touchBack.js";
export default {
  components: {},
  data() {
    return {
      store,
      transitionName: "",
      includes: [
        "SnapshotRecord",
        "Home",
        "SafetyPresent",
        "SnapshotRepeated",
        "Snapshot",
      ],
    };
  },
  created() {
    this.$store.state.windowHeight = window.innerHeight;
  },

  mounted() {
    // var lastTouchEnd = 0;
    document.addEventListener("touchstart", function (event) {
      if (event.touches.length > 1) {
        event.preventDefault();
      }
    });

    // 阻止双指放大;
    document.addEventListener("gesturestart", function (event) {
      event.preventDefault();
    });

    touchBack("app", this.touchCallBack, 100);
  },
  watch: {
    $route(to, from) {
      // 通过判断路由自定义的级别来判断是转入还是转出
      if (to.meta.level > from.meta.level) {
        this.transitionName = "slide-left";
      } else if (to.meta.level < from.meta.level) {
        this.transitionName = "slide-right";
      } else {
        this.transitionName = "";
      }
    },
  },
  methods: {
    touchCallBack() {
      if (
        [
          "Login",
          "Work",
          "Assignment",
          "Message",
          "Profile",
          "StatisticalAnalysis",
          "EmergencyManagement",
        ].includes(this.$route.name)
      )
        return;
      this.$router.back();
    },
  },
};
</script>

<style lang="less">
@import url("style/mixin.less");
#app {
  .self-fill(fixed);
  font-size: 38px;
  overflow: hidden;
  box-sizing: border-box;
  & > div {
    width: 100%;
    height: 100%;
    font-size: inherit;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

#nprogress div.bar {
  height: 4px;
}

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.5s;
  width: 100%;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
</style>
